<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>个人信息</title>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
 	<!-- jquery高版本 -->
	<script src="${_root}/resources/js/jquery-3.2.1.js"></script>
  <script type="application/javascript">
  	$jq3=jQuery.noConflict();
  	console.log("$jq3的version:"+$jq3().jquery);
  	var user='${juser}';//写入user的相关信息
  	if(user){
  		var juser=JSON.parse(user);
  	  	console.log(juser);
  	}
  	var baseURL='${_root}';
  </script>
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css" rel="stylesheet">

	    <link rel="stylesheet" type="text/css" href="${_root}/resources/t2/stylesheets/theme.css">
    <link rel="stylesheet" type="text/css" href="${_root}/resources/t2/stylesheets/premium.css">
	<link rel="stylesheet" type="text/css" href="${_root}/resources/css/jquery.tmailsilder.v2.css" />
	
	<!--文件上传插件-->
	<link rel="stylesheet" href="${_root}/resources/css/fileinput.min.css" />
	<link rel="stylesheet" href="${_root}/resources/css/formValidation.min.css" />
	<!-- 图片裁剪插件 -->
	<link rel="stylesheet" href="${_root}/resources/css/crobox.css" />
		<!--右键和消息弹框提醒-->
	<link rel="stylesheet" href="${_root}/resources/css/toastr.css">
	<link rel="stylesheet" href="${_root}/resources/css/highlight-8.6.default.min.css">
	<style>
		/*表示导航的一项*/
		.nav_item{
			
		}
		/*表示导航每一项的内容面板*/
		.nav_item_content{
			
		}
		
	</style>
</head>

<body class="theme-blue">
	<%@include file="/WEB-INF/jsp/common/top.jsp" %>
	<div class="sidebar-nav">
			<ul class="nav nav-pills nav-stacked">
			  <li role="presentation" class="active" ><a href="${_root}/jsp/person">个人信息</a></li>
			  <li role="presentation" ><a href="${_root}/article/uparticle">上传文章</a></li>
			  <li role="presentation"><a href="${_root}/jsp/collection">收藏的文章</a></li>
			  <li role="presentation"><a href="${_root}/jsp/articlemanager">文章管理</a></li>
			</ul>
	</div>
	<div class="content container-fluid" style="margin-top:50px">
		<div class="row">
			<div class="col-lg-12">
				<ul class="nav nav-tabs nav_item" >
				  <li role="presentation" class="active"><a href="#">个人基本信息</a></li>
				  <li role="presentation"><a href="#">修改密码</a></li>
				</ul>
				<div class="panel panel-default nav_item_content">
					<div class="panel-body">
						<!--个人信息修改页面-->
						<div class="row">
							<div class="col-lg-8">
							<form  id="saveForm" class="form-horizontal" enctype="multipart/form-data">
									<!--用来表示用户id-->
										<input type="hidden" name="id" value='${user.id}' />
										<div class="form-group">
											<label for="name" class="control-label col-lg-2">用户名:</label>
											<div class="col-lg-9">
												<p class="form-control-static">${user.name}</p>
											</div>				
										</div>
										<!-- /.form-group -->
									
										<div class="form-group">
											<label class="control-label col-lg-2">邮箱:</label>
											<div class="col-lg-9">
												<p class="form-control-static">${user.email}</p>
											</div>
										</div>
										<!-- /.form-group -->
									
										<div class="form-group">
											<label for="text2" class="control-label col-lg-2">昵称:</label>
									
											<div class="col-lg-9">
												<input type="text" name="nickName" value="${user.nickName}"placeholder="您暂时还未设置昵称" class="form-control">
											</div>
										</div>
										<div class="form-group">
											<label for="sex" class="control-label col-lg-2">性别:</label>
											<div class="col-lg-9">
									
												<label class="radio-inline">
									                    		<input type="radio" name="sex" value="1" checked="${user.sex ? true :false}" />男
									                    		</label>
												<label class="radio-inline">
									                    			<input type="radio" name="sex" value="0" checked="${user.sex ? false :true}" />女
									                    		</label>
											</div>
										</div>
										<button type="button" class="btn btn-default col-lg-offset-2" id="saveInfo">保存</button>
								</form>
							</div>
							<div class="col-lg-4">
								<!--用作头像展示-->
								<div style="height: 170px;width: 170px;">
									<c:choose>
										<c:when test="${empty user.avator}">
											<img id="avator" src="${_root}/resources/images/170x170.gif" style="width:170px;height:170px;border-radius:170px;"/><br />
											
										</c:when>
										<c:otherwise>
											<img id="avator" src="${user.avator}" style="width:170px;height:170px;border-radius:170px;"/><br />
										</c:otherwise>
									</c:choose>
									
									<!--data-uid代表用户的userID-->
									<button type="button" class="btn btn-primary center-block" style="margin-top:6px" data-toggle="modal" data-target="#myModal" data-uid="${user.id}"/>更换头像</button>
								</div>
								
							</div>
						</div>
						
					</div>
				</div>
				<div class="panel panel-default hidden nav_item_content">
					<div class="panel-body">
						<form class="form-horizontal" name="reset">
								<input type="hidden" name="id" value="${user.id}"/>
								<div class="form-group">
									<label for="pwd" class="col-sm-2 control-label">原密码：</label>
									<div class="col-sm-10">
										<input type="password" name="pwd"  class="form-control"  placeholder="请输入原密码">
									</div>
								</div>
								<div class="form-group">
									<label for="npwd" class="col-sm-2 control-label">新密码：</label>
									<div class="col-sm-10">
										<input type="password" class="form-control"  name='npwd'  placeholder="请输入密码">
									</div>
								</div>
								<div class="form-group">
									<label for="rpwd" class="col-sm-2 control-label">重复密码：</label>
									<div class="col-sm-10">
										<input type="password" class="form-control"  name='rpwd'  placeholder="请重复密码">
									</div>
								</div>
								<div class="form-group">
									<label for="code" class="col-sm-2 control-label">邮箱验证码：</label>
									<div class="col-sm-2" >
										<input type="text" class="form-control"  name='code' id="authcode">
										
									</div>
									<div class="col-sm-2" style="padding-left:0px">
										<button type="button" class="btn btn-default" id="btn-code">发送验证码</button>
									</div>
									
								</div>
								<div class="form-group">
									<div class="col-sm-offset-2 col-sm-10">
										<button type="button" class="btn btn-default" id="modifyPwd">修改密码</button>
									</div>
								</div>
							</form>
					</div>
				</div>
			</div>
		</div>
		
	</div>
<!-- Modal -->
<div class="modal fade fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">选择头像</h4>
      </div>
      <div class="modal-body">
       <div class="boxcontainer center-block">

  <div class="imageBox">

    <div class="thumbBox"></div>

    <div class="spinner" style="display: none"></div>

  </div>

  <div class="action"> 

    <!-- <input type="file" id="file" style=" width: 200px">-->

    <div class="new-contentarea tc"> <a href="javascript:void(0)" class="upload-img">

      <label for="upload-file" class="btn-primary">请先选择图片...</label>

      </a>

      <input type="file" class="" name="upload-file" id="upload-file" />

    </div>

    <input type="button"   id='btnCrop' class="Btnsty_peyton btn-primary" value="裁剪">

    <input type="button" id="btnZoomIn" class="Btnsty_peyton btn-primary" value="+"  >

    <input type="button" id="btnZoomOut" class="Btnsty_peyton btn-primary" value="-" >

  </div>

  <div class="cropped"></div>

</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="saveAvator" data-uid="${user.id}">设置头像</button>
      </div>
    </div>
  </div>
</div>

	<!-- 底部资源 -->
	  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.js"></script>
	<%@include file="/WEB-INF/jsp/common/buttom_resources.jsp"%>
<script type="text/javascript" src="${_root}/resources/js/jquery.tmailsilder.v2.js" ></script>
 <script type="application/javascript" src="${_root}/resources/js/cropbox.js"></script>
 
 	<!--右键功能-->
		<script type="text/javascript" src="${_root}/resources/js/BootstrapMenu.min.js" ></script>
		<script type="text/javascript" src="${_root}/resources/js/toastr.js" ></script>
		<script type="text/javascript" src="${_root}/resources/js/highlight-8.6.default.min.js" ></script>
		<script type="text/javascript" src="${_root}/resources/js/scale.fix.js" ></script>
 <script type="application/javascript">
 	//初始化标签导航栏
 	(function(){
 		//为标签导航添加事件
 		$jq3('ul.nav_item li').on('click',function(event){
 			closeAll();
 			$jq3(this).addClass('active');
 			var index=$jq3('ul.nav_item li').index($jq3(this));//获取点击的是第几个标签页
 			$jq3('.nav_item_content').eq(index).removeClass('hidden');
 		});
	 	function closeAll(){
	 		$jq3('ul.nav_item li').removeClass('active');//关闭所有的avtive标识
	 		$jq3('.nav_item_content').addClass('hidden');//关闭所有的面板
	 	}
	 	
	 	//为密码修改功能添加FormValidator
	 	$jq3(document.forms['reset']).formValidation({
			message:'不是有效的值',
			icon:{
				valid: 'glyphicon glyphicon-ok',
	            invalid: 'glyphicon glyphicon-remove',
	            validating: 'glyphicon glyphicon-refresh'
			},
			//要验证的域
			fields:{
				pwd:{
					//验证原密码
					validators:{
						notEmpty:{
							message:'请输入原密码'
						}
					}
				},
				npwd:{
					validators: {
	                    notEmpty: {
	                        message: '密码不能够为空'
	                    },
	                    stringLength:{
								min:6,
								max:30,
								message:'密码长度必须在6-30个字符之间'
						}
	                }
				},
				rpwd:{
					 validators: {
		                    notEmpty: {
		                        message: '重复密码不能为空'
		                    },
		                    identical: {
		                        field: 'npwd',
		                        message: '两次密码输入不一致'
		                    }
		                }
				},
				code:{
					validators: {
	                    notEmpty: {
	                        message: '验证码不能够为空'
	                    }
	                }
				}
			}
	 	}).on('success.form.fv',function(e){
	 		 e.preventDefault();//防止表单自动提交
 			const base="${_root}/";
 			$jq3.ajax({
 				url:base+"user/modifyPwd",
 				type:'POST',
 				dataType:'json',
 				data:$jq3(document.forms['reset']).serialize(),
 				success:function(json){
 					toastr.info(json.msg);
 					if(json.status==200)
 						window.location="/cms/jsp/login";
 				},
 				error:function(){
 					toastr.info("服务器未知错误");
 				}
 			});
		});
 	})();
 	//初始化图片剪切插件
 	(function(){
 		var options =

	{

		thumbBox: '.thumbBox',

		spinner: '.spinner',

		imgSrc: '',
		upflag:false,
		flag:false

	};

	var cropper = $jq3('.imageBox').cropbox(options);

	var img="";

	$jq3('#upload-file').on('change', function(){

		var reader = new FileReader();

		reader.onload = function(e) {

			options.imgSrc = e.target.result;

			cropper = $jq3('.imageBox').cropbox(options);

			getImg();
			options.upflag=true;

		}

		reader.readAsDataURL(this.files[0]);

		this.files = [];
		
		//getImg();

	});

	$jq3('#btnCrop').on('click', function(){

		getImg(); 
		options.flag=true;

	});

	function getImg(){

		img = cropper.getDataURL();

		$jq3('.cropped').html('');

		$jq3('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:145px;margin-top:178px;border-radius:170px;box-shadow:0px 0px 12px #7E7E7E;"><p>170px*170px</p>');

//		$jq3('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
//
//		$jq3('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');

		}

		

	$jq3(".imageBox").on("mouseup",function(){

 		getImg();
  		});
	$jq3('#btnZoomIn').on('click', function(){

		cropper.zoomIn();

	});

	$jq3('#btnZoomOut').on('click', function(){

		cropper.zoomOut();

	});
	$jq3('#saveAvator').on('click',function(event){
			//开始保存图片
			
			if(!(options.flag&&options.upflag)){
				alert('不能选择空的图像');
				return;
			}
			var uid=$jq3(this).data('uid');//获取用户id
			var img=cropper.getBlob();//获取img的Bolb对象
			var formData=new FormData();
			formData.append('avator',img,"avator.jpg");
			const url=baseURL+"/user/saveavator?uid="+uid;
			$jq3.ajax({
				url:url,
				type:'POST',
				data:formData,
				async:false,
    			cache:false,
    			contentType:false,
    			processData:false,
    			dataType:'json',
    			success:function(json){
    				$jq3('#myModal').modal('hide');
    				if(json.status==200){
    					toastr.info('头像设置成功');
    					//然后更改头像显示
    					$jq3('#avator').prop('src',json.data.avator);
    				}else{
    					toastr.info('头像设置失败');
    				}
    			},
    			error:function(json){
    				$jq3('#createModal').modal('hide');
    				toastr.info('Sorry,服务器错误');
    			}
			});
		});
 	})();
 	(function(){
 		//消息模态框展示时触发事件
		$jq3('#myModal').on('show.bs.modal', function (event) {
			 var button = $jq3(event.relatedTarget);//获取触发按钮
			 var uid=button.data('uid');//获取用户id
			 $jq3('#saveAvator').data('uid',uid);//为保存用户头像设置userid
		});
 	})();
 	
 	
 	//修改用户信息或者修改密码等按钮注册事件
 	$jq3(function(){
 		//保存用户信息
 		$jq3('#saveInfo').on('click',function(event){
 			const base="${_root}/";
 			$jq3.ajax({
 				url:base+"user/update",
 				type:'POST',
 				dataType:'json',
 				data:$jq3('#saveForm').serialize(),
 				success:function(json){
 					if(json.status==500){
 						toastr.info("更新失败");
 					}else{
 						toastr.info("更新成功");
 					}
 				},
 				error:function(){
 					toastr.info("服务器未知错误");
 				}
 			});
 		});
 		//点击发送验证码按钮
 		$jq3('#btn-code').on('click',function(event){
 			$jq3(this).prop('disabled','disabled');//禁用btn
 			$jq3(this).html('59秒后可以重复发送');
 			var times=59;
 			var status=setInterval(function(){
 				times--;
 				if(times<=0){
 					$jq3('#btn-code').html('发送验证码');
 					$jq3('#btn-code').removeProp('disabled');//移除禁用
 					clearInterval(status);//清除重复执行
 					return;
 				}
 				$jq3('#btn-code').html(times+"秒后可以重发");
 			}, 1000);//每秒执行一次
 			//通过ajax向服务器获取验证码,向用户发送验证邮件
 			const base="${_root}/";
 			$jq3.ajax({
 				url:base+"user/authcode?uid="+(juser.id),
 				type:'GET',
 				dataType:'json',
 				success:function(json){
 					if(json.status==500){
 						toastr.info("验证码发送失败");
 					}else{
 						toastr.info("验证码发送成功");
 					}
 				},
 				error:function(){
 					toastr.info("服务器未知错误");
 				}
 			});
 		});
 		//点击修改密码
 		$jq3('#modifyPwd').on('click',function(event){
 			$jq3(document.forms['reset']).formValidation('validate');//验证表单
 		
 		});
 	});
 		
 	
 	
 </script>
</body>
</html>